<template>
  <view class="Box">
    <view class="numberBox">
      <view class="number">
        <view class="numberLeft">
          订单编号
        </view>
        <view class="numberRight">
          {{ storageData.order.orderNum }}
        </view>
      </view>
      <view class="numberItem">
        <view class="itemLeft">
          下单时间
        </view>
        <view class="itemRight">
          {{ storageData.order.createTime }}
        </view>
      </view>
      <view v-if="storageData.oderStatus != 0" class="numberItem">
        <view class="itemLeft">
          支付时间
        </view>
        <view class="itemRight">
          {{ storageData.order.payTime }}
        </view>
      </view>
      <view v-if="storageData.oderStatus != 0" class="numberItem">
        <view class="itemLeft">
          支付金额
        </view>
        <view class="itemRight">
          ￥{{ storageData.orderItem.fen / 100 }}
        </view>
      </view>
    </view>

    <view class="ProductsBox">
      <view class="Products">
        <image :src="storageData.orderItem.shopSundry.dishesImg" class="positionImg">
        </image>
        <view class="titleBox">
          <view class="title">
            {{ storageData.orderItem.shopSundry.dishesName }}
          </view>
          <view class="price">
            ￥{{ storageData.orderItem.shopSundry.price }}/{{ storageData.orderItem.shopSundry.specification }}
          </view>
        </view>
      </view>
    </view>
    <view class="NumberOfTravelers">
      <view class="NumberOfTravelers-text">数量</view>
      <view class="">
        {{ storageData.orderItem.payCount }}
      </view>
    </view>

    <view class="buttonlist">
      <view class="buttonBox cancelBox" @click="cancelClick">
        取消核销
      </view>
      <view class="buttonBox" @click="confirmClick">
        确认核销
      </view>
    </view>
  </view>
</template>

<script>
import {
  querySundryOrderInfo,
  queryUserShopIdByPhone,
  cancelAfterVerification
} from "@/api/challenge";

export default {
  data() {
    return {
      storageData: {},
      queryUserBoole: false,
      shopId: ''
    }
  },
  onLoad(data) {
    querySundryOrderInfo({
      orderId: data.scene
    }).then(params => {
      console.log('查询', params);
      this.storageData = params
    })
    queryUserShopIdByPhone({
      phone: uni.getStorageSync("userinfo").phone
    }).then(res => {
      console.log('输出权限', res);
      if (res) {
        this.queryUserBoole = true
        this.shopId = res
      }
    })
  },
  methods: {
    cancelClick() {
      uni.switchTab({
        url: '/pages/my/index'
      });
    },
    confirmClick() {
      if (this.queryUserBoole) {
        cancelAfterVerification({
          orderId: this.storageData.orderItem.orderId,
          shopId: this.shopId
        }).then(res => {
          console.log('核销', res);
          if (res == true) {
            uni.reLaunch({
              url: "/pages/my/orderList/verificationStatus?type=1"
            })
          } else {
            uni.reLaunch({
              url: "/pages/my/orderList/verificationStatus?type=2"
            })
          }
        })
      } else {
        uni.$u.toast("不是商铺账号,不能确定核销!");
      }

    }
  }
}
</script>

<style lang="scss" scoped>
.Box {
  width: 100%;
  height: 100vh;
  background: #f2f2f2;
  padding-top: 32rpx;
  font-family: PingFang SC, PingFang SC-Heavy;

}

.numberBox {
  margin: 0 32rpx;
  background-color: #fff;
  padding: 0 20rpx 10rpx 20rpx;
  border-radius: 20rpx;

  .number {
    display: flex;
    justify-content: space-between;
    padding: 32rpx 0 18rpx 0;

    .numberLeft {
      font-weight: 800;
    }


  }

  .numberItem {
    display: flex;
    justify-content: space-between;
    border-top: 2rpx solid #eeeeee;
    font-size: 28rpx;
    color: #757575;
    padding: 22rpx 0 18rpx 0;
  }
}

.ProductsBox {
  padding-top: 32rpx;

  .Products {
    background-color: #fff;
    margin: 0rpx 32rpx 32rpx 32rpx;
    display: flex;
    padding: 20rpx;
    border-radius: 20rpx;

    .positionImg {
      width: 152rpx;
      height: 152rpx;
    }

    .titleBox {
      margin-left: 20rpx;

      .title {
        font-weight: 800;
        color: #212121;
      }

      .price {
        color: #ff0000;
        margin-top: 20rpx;
      }
    }
  }
}

.NumberOfTravelers {
  display: flex;
  justify-content: space-between;
  margin: 0 32rpx;
  background-color: #fff;
  padding: 32rpx;
  border-radius: 20rpx;

  .NumberOfTravelers-text {
    font-weight: 800;
  }
}

.buttonlist {
  display: flex;
  justify-content: space-evenly;
  padding-top: 70rpx;

  .buttonBox {
    width: 202rpx;
    height: 84rpx;
    line-height: 84rpx;
    text-align: center;
    background: #4186f5;
    border-radius: 12rpx;
    color: #fff;
  }

  .cancelBox {
    color: #4186f5;
    background-color: #fff;
    border: 2rpx solid #4186f5;
  }
}
</style>
